<template>
  <div id="app">
    <header>
      <h1>ERP管理系统</h1>
      <p class="subtitle">点击任意卡片可查看工位的排队信息，点击右上角关闭按钮返回网格视图</p>
      <div class="controls">
        <button class="btn" @click="fetchStations">
          <i class="fas fa-sync"></i> 刷新工位
        </button>
      </div>
    </header>

    <div class="grid-container" :style="{ gridTemplateColumns: layout }">
      <div v-for="(station, index) in stations" :key="station.id" class="grid-item" @click="openModal(station)">
        <div class="item-content">
          <h3 class="item-title">{{ station.name }}</h3>
          <p class="item-description">IP地址: {{ station.ipaddr }}</p>
          <p class="item-description">工位ID: {{ station.id }}</p>
          <div class="item-footer">
            <button class="btn" @click.stop="startProcessing(station.id)">启动</button>
            <button class="btn" @click.stop="completeProcessing(station.id)">完成</button>
          </div>
        </div>
      </div>
    </div>

    <el-dialog v-model="dialogVisible" :title="title">
      <el-table :data="selectedStation" style="width: 100%; max-height: 300px; overflow-y: auto;">
        <el-table-column v-for="col in tableColumns" :key="col.prop" :prop="col.prop" :label="col.label"
          :width="col.width" :show-overflow-tooltip="col.tooltip || false" />
      </el-table>
      <div style="text-align: right; margin-top: 10px;">
        <b>预计总耗时：</b><span style="color: red;font-weight: bold;">{{ totalelapsed }}</span>分钟
      </div>
    </el-dialog>

    <footer>
      <p>erp-demo
      </p>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { useGetWorkstationListApi, useGetWorkStationProssesProductListApi, usePostCompleteDishpatchApi, usePostProceedDispatchApi } from './utils/api'
import { ElMessage } from 'element-plus';

const stations = ref([])
const selectedStation = ref(null)
const dialogVisible = ref(false)

const layout = ref("repeat(auto-fill, minmax(300px, 1fr))")

const totalelapsed = computed(() => {
  if (!selectedStation.value) return 0
  return selectedStation.value.reduce((sum, item) => sum + (item.elapsed || 0), 0)
})
const title = ref('某某工位加工产品队列')
const tableColumns = [
  { prop: 'queueNum', label: '队列号', width: 140, tooltip: true },
  { prop: 'pieceId', label: '件号' },
  { prop: 'productNum', label: '产品号', width: 100, tooltip: true },
  { prop: 'productName', label: '产品名称' },
  { prop: 'elapsed', label: '预计耗时', width: 100 },
  { prop: 'memo', label: '备注' }
]

async function fetchStations() {
  const { data } = await useGetWorkstationListApi()
  stations.value = data
}

async function openModal(station) {
  title.value = `${station.id}号${station.name}工位加工产品队列`
  const { data } = await useGetWorkStationProssesProductListApi(station.id)
  console.log('data', data);
  selectedStation.value = data
  dialogVisible.value = true
}

async function startProcessing(stationId) {
  usePostProceedDispatchApi(stationId)
    .then(res => {
      ElMessage.success('已开始加工')
    })
    .catch(err => {
      console.error('接口异常', err)
    })
}

async function completeProcessing(stationId) {
  usePostCompleteDishpatchApi(stationId)
    .then(res => {
      ElMessage.success('加工完成')
    })
    .catch(err => {
      console.error('完成失败:', err)
    })
}

onMounted(() => {
  fetchStations()
})
</script>

<style>
header {
  background: #fff;
  color: #222;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  margin-bottom: 32px;
}

.grid-item {
  background: #fff;
  color: #222;
  border: 1px solid #e0e0e0;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
  border-radius: 18px;
}

.btn {
  background: #3b82f6;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 20px;
  font-weight: bold;
  transition: background 0.2s;
}

.btn:hover {
  background: #2563eb;
}

.el-dialog,
.el-table {
  background: #fff !important;
  color: #222 !important;
  border-color: #e0e0e0 !important;
}
</style>